<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<link rel="stylesheet" href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="childrenBody">
	<form class="layui-form">
		<blockquote class="layui-elem-quote quoteBox">
			<form class="layui-form">
				<div class="layui-inline" >
					<label class="layui-form-label">部门</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="dname" readonly lay-verify="required" placeholder=""> <input type="hidden" class="searchVal" name="did" id="did">
					</div>
					<a class="layui-btn" id="btn_treeClean">清空</a>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label"> </label>
					<div class="layui-input-block">
						<a  id="pre-btn" class="layui-btn pre-btn layui-btn-danger" style="display: none;"
							data-type="reload">《</a>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label"></label>
					<div class="layui-input-block">
						<select  id="rmMth"  lay-filter="rmMth"></select>
					</div>
				</div>
				<div class="layui-inline">
					<label> </label>
					<div class="layui-input-block">
						<a id="next-btn" class="layui-btn next-btn layui-btn-danger" style="display: none;"
							data-type="reload">》</a>
					</div>
				</div>
			</form>
		</blockquote>
				<blockquote class="layui-elem-quote quoteBox">
			<div class="layui-inline">
				<a class="layui-btn search-btn" data-type="reload">搜索</a> 
			</div>
		</blockquote>
		<table id="list" lay-filter="list"></table>
	</form>
		<div id="treeDiv" class="menuContent" style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
		<ul id="departmentTree" class="ztree" style="margin-top: 0; width: 160px;"></ul>
	</div>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript" src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript">
		layui.use([ 'form', 'layer', 'laydate', 'table',  'laytpl' ], function() {
			
			var listApi = '../../../finance/reimburse/listM';
		 
			var cols = [ [ {
				//type : "checkbox",
				fixed : "left",
				width : 50,
				title : '<input type="checkbox" lay-skin="primary"  id="check-all" class="check-all" lay-filter="check-all">',
				templet : function(d) {
					var str = '';
					if (!hasProtect(d)) {
						str += '<input type="checkbox" lay-skin="primary" class="check-one"  value="'+d.id+'" lay-filter="check-one">';
					} else {
						str += '<input type="checkbox" lay-skin="primary" class="check-one"  value="'+d.id+'" lay-filter="check-one" disabled >';
					}
					return str;
				}
			}, {
				field : 'edtm',
				title : '报销月份',
				align : 'center'
			},
			{
				field : 'dname',
				title : '部门',
				align : "center"
			},
			{
				field : 'rname',
				title : '报销申请人',
				align : "center"
			},  {
				field : 'amount',
				title : '金额',
				align : 'center'
			}, {
				field : 'cntsub',
				title : '子项数量',
				align : 'center',
			}, {
				field : 'rwst',
				title : '审核状态',
				align : 'center',
				templet : function(d) {         
				    if(d.rwst == 6){
					 return '<span class="layui-badge layui-bg-blue">待放款</span>'
			    	}else{
					    return '<span class="layui-badge layui-bg-green">已放款</span>';
				   }
				}
			}, {
				title : '操作',
				fixed : "right",
				align : "center",
				templet : function(d) {
			       if(d.rwst==6 && hasPermission('000000000005', d)  ){
			    	   return'<a class="layui-btn layui-btn-xs" lay-event="toUpdate">发放</a>';
					}
				}
			} ] ];
			var pram = merger(constant.page.toUri(), getsearchVal());
			var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer;
			var $ = layui.jquery;
			var laytpl = layui.laytpl;
			var table = layui.table;
			var laydate = layui.laydate;
			tableIns = table.render({
				elem : '#list',
				cellMinWidth : constant.table.cellMinWidth,
				page : false,
				height : constant.table.height,
				cols : cols,
				done : function(res, page, count) {
					checkAll(form);
				}
			});

			//用户列表
			listLoad(pram);
			function listLoad(data) {
				loadAjax( listApi, "get", data, function(response) {
					baseCallBack(response, function(response) {
						
						table.reload("list", {
							data :  response.data.datas 
						//显示的数量
						})
						
						 $("#pre-btn").hide();
						 $("#next-btn").hide();
							if(response.data.navi){
								naviObj = response.data.navi
								if(response.data.navi.pre){
									$("#pre-btn").show();
								}
                                if(response.data.navi.next){
                                	$("#next-btn").show();
								}
								$("#rmMth").empty();
								// 月份导航下拉框
								$.each(response.data.navi.selectAll,(i,e)=>{
									   if(response.data.navi.current == e){
										   $("<option selected>"+e+"</option>").appendTo($("#rmMth"));
									   }else{
 					                       $("<option>"+e+"</option>").appendTo($("#rmMth"));
									   }
				                    })
							}
							form.render();
					});
				});
			}
 			laydate.render({
				elem : '#edtm' //指定元素
			});
			// 搜索【此功能需要后台配合，所以暂时没有动态效果演示】
			$(".pre-btn").on("click", function() {
				 listLoad({ mth:naviObj.pre  });
			});
			$(".next-btn").on("click", function() {
				listLoad({ mth:naviObj.next });
			});
			// layUI处理change事件不生效
            form.on('select(rmMth)', function(data){
				  listLoad({ mth:$("#rmMth").val()  })
			});	    	
			//搜索
			$(".search-btn").on("click", function() {
				pram = merger(pram, getsearchVal());
				listLoad(pram);
			});
			//列表操作
			table.on('tool(list)', function(obj) {
				var layEvent = obj.event;
				var d = obj.data;
				  if (layEvent === 'toUpdate') {
					//发放
				  openAreaLayer(d.rname+"-的报销", "pay.html?eid=" + d.eid+"&cost="+d.amount+"&mth="+d.edtm+"&count="+d.cntsub,"480px", "280px", true);
			    }
			});
			
			
			//ztree
			var setting = {
				view : {
					dblClickExpand : false
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					onClick : onClick
				}
			};
			function onClick(e, treeId, treeNode) {
				$("#did").val(treeNode.id);
				$("#dname").val(treeNode.name);
				hideMenu();
			}
			
			$("#btn_treeClean").click(function() {
				$("#did").val('');
				$("#dname").val('');
			})
			function showMenu() {
				var cityObj = $("#dname");
				var cityOffset = $("#dname").offset();
				$("#treeDiv").css({
					left : cityOffset.left + "px",
					top : cityOffset.top + cityObj.outerHeight() + "px"
				}).slideDown("fast");
				$("body").bind("mousedown", onBodyDown);
			}
			function hideMenu() {
				$("#treeDiv").fadeOut("fast");
				$("body").unbind("mousedown", onBodyDown);
			}
			function onBodyDown(event) {
				if (!(event.target.id == "btn_treeSelect" || event.target.id == "treeDiv" || $(event.target).parents("#treeDiv").length > 0)) {
					hideMenu();
				}
			}
			$("#dname").click(function() {
				showMenu()
			})
			loadAjax( "../../../getDepartment", "get", null, function(response) {
				baseCallBack(response, function(response) {
					var tdata = response.data.splice(0,3)
					$.fn.zTree.init($("#departmentTree"), setting, tdata); 
				});
			});

		})
	</script>
</body>
</html>